<template>
  <el-dialog :visible.sync="dialogVisible" width="550px" title="新增标签" :close-on-click-modal="false" :close-on-press-escape	='false'>
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="标签名称" prop="labelName">
        <el-input v-model="form.labelName" placeholder="请输入标签名称" style="width: 300px" size="small"></el-input>
      </el-form-item>
      <el-form-item label="标签颜色" prop="labelColor">
        <el-color-picker
          v-model="form.labelColor"
          :predefine="predefineColors">
        </el-color-picker>
      </el-form-item>
    </el-form>
    <!-- 底部按钮-->
    <div slot="footer" class="dialog-footer" align="right">
      <el-button  @click="dialogVisible = false" size="mini">取 消</el-button>
      <el-button  type="primary" @click="submit" size="mini">确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
    import {save} from "@/api/mail/admin/mail-label";
    export default {
        name: "LabelDialog",
        data(){
            return{
                dialogVisible:false,
                form:{
                    labelName: '',
                    labelColor: '#3399F6'
                },
                rules: {
                    labelName: [
                        {required: true, message: '请输入标签名称', trigger: 'blur'},
                        {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
                    ],
                    labelColor: [
                        {required: true, message: '请选择标签颜色', trigger: 'blur'},
                    ],
                },
                predefineColors: ['#000000', '#BE5957', '#DA762F', '#139891', '#4A669F', '#595AC1', '#333333', '#E63C38', '#EC994D', '#5DBD7F', '#5B87ED', '#8D50BF', '#7B8291', '#F07A79', '#E3AE02', '#7EC65E', '#45A7EE', '#ACACAC'],
            }
        },
        methods:{
            init(){
                this.form.labelName = '';
                this.form.labelColor = '#3399F6';
                this.dialogVisible=true;
            },
            submit(){
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        save(this.form).then(res => {
                            this.$message({
                                type: "success",
                                message: res.data.msg
                            });
                            this.$store.dispatch('update_labelList').then(()=>{
                                this.bus.$emit('refreshFolderChange')
                                this.$emit('newLabel')
                            })
                            this.dialogVisible=false;
                        }).catch(err => {
                            console.log(err)
                        });
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>
</style>
